/*
 * 使用方法
 * 1. 在 static 文件夹下放置 echarts.min.js。
 * 2. 在 components 文件夹下新建 echarts 文件夹，里面放置 echarts.vue。
 * 3. [页面或组件中使用] 引入图表绘制组件 import Echarts from '@/components/echarts/echarts.vue'
 * 4. props传入 :option="x" 图表配置，与 echarts 官方的配置文档一摸一样。
 */


/*
 * 注意事项：
 * 1. echarts.min.js 必须放置在 static 下(因为 echarts.vue 会动态引入)，如必须更改，请打开 echarts.vue 找到62行进行更改。
 * 2. echarts.min.js 谨慎引入，体积过大会影响性能，除非用到其中的方法，否则不要引入(如下示例已经引入了)。
 * 3. 关于调整图表DOM样式，可以在 echarts.vue 中的 class="echarts" 中调整，也可以在本页面直接给组件设置样式（本示例就是这样做的）
 * 再者也可以借助 echarts grid 配置项，进行位置微调。
 */

<template>
	<view>
		<Echarts
		:option="option"
		class="charts"
		>
		</Echarts>
	</view>
</template>

<script>

// echarts.min.js 核心库(ets)
// 体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理，手机端使用过大的js库影响性能
// [无特殊需求最好不要引入]
import ets from '../../static/echarts.min.js'

// 绘制图表组件
import Echarts from '@/components/echarts/echarts.vue'

export default {
	
	components: { Echarts },
	data() {
		return {
			
			// 图表配置(与官方文档一致)
			option: {
                grid: {
                    // left: '5%',
                    // right: '0%',
                    // bottom: '5%',
                    // containLabel: true
                },
				
				// 输入放入显示数据
				tooltip : {
					trigger: 'axis',
					axisPointer: {
						type: 'line',
						label: {
							backgroundColor: 'rgba(255,255,255,.2)'
						}
					},
					backgroundColor: 'rgba(255,255,255,.2)',
					borderWidth: '0',
					textStyle: {
						color: '#fff'
					}
				},
				
                xAxis: {
                    type: 'category',
					axisLabel:{},
                    boundaryGap: true,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
				
                yAxis: {
                    type: 'value',
					name: 'kw(千瓦)'
                },
				
                dataZoom: [
                    {
                        show: false,//不显示拖动条
                        realtime: true,
                        start: 0,//开始位置
                        end: 100//结束位置
                    },
                    {
                        type: 'inside',
                        realtime: true,
                        start: 65,
                        end: 85
                    }
                ],
				
                series: [
                    {
                        name: 'max',
                        type: 'line',
						lineStyle: {
							color: 'rgb(108, 176, 240)',
							width: 3
						},
						areaStyle: {
							
							// 像这种情况就需要引入 echarts.js 核心库
							// 因为渐变色配置需要使用 echarts.js > graphic > LinearGradient
							color: new ets.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#5EA7FB'
							}, {
								offset: 1,
								color: 'rgba(1, 191, 236, 0)'
							}])
						},
						// 自定义折线图样式
						// itemStyle: {
						// 	borderWidth: 3,
						// 	borderColor: '#5470C6',
						// 	color: 'yellow',
						// 	shadowColor: 'rgba(0, 0, 0, 0.5)',
						// 	shadowBlur: 10
						// },
						smooth: 0.6,
						// 图表数据
                        data: [820, 50, 901, 94, 500, 1330, 20],
                    }
                ]
            },
		}
	},
	
	onLoad() {

	},
	
	methods: {

	}
}
</script>

<style>

/* 图表样式 */
.charts{
	background: #e7e7e7;
	height: 300px;
	width: 100vw;
	border-radius: 80rpx;
}
/* END */
</style>
